import { Suspense } from "react"
import {BrowserRouter as Router,Route,Switch,Redirect,NavLink } from "react-router-dom"
let RouterView = (props)=>{
    // console.log(props)
    let {RouterList} = props
    // 这个数组里有两种形式得对象，一种是正常渲染得route，一种是重定向
    let routerList = RouterList.filter((item,index)=>{ // 需要转化为route标签得数组
        return !item.to
    })
    let redirect =  RouterList.filter((item,index)=>{ // 需要转化为Redirect标签得数组
        return item.to
    })[0]
    console.log(redirect)
    console.log(routerList)
    return (   // 把Swicth写在路由表的suspense里
        <Suspense fallback={<div>...loading</div>}>
            <Switch>
            {
                routerList&&routerList.length?routerList.map((item,index)=>{
                    return <Route path={item.path} render={(routerProps)=>{ // routerProps 是一些路由信息
                            if (item.children) { // all
                                return <item.component {...routerProps} child={item.children}></item.component>
                            }
                            return <item.component {...routerProps}></item.component> // my
                    }} key={index}></Route>
                }):"暂无路由"
            }
            {
                redirect?<Redirect to={redirect.to} from={redirect.from}></Redirect>:"暂无重定向"
            }
            </Switch>
           
        </Suspense>
    )
}
export default RouterView